<template>
  <div class="twoBox">
    <div class="activityData" >
      <el-form :model="queryParams" ref="queryForm" :inline="true"  label-width="100px">
        <el-form-item label="" prop="keyword">
          <el-input v-model="queryParams.keyword" placeholder="手机号/姓名" clearable size="small"
            @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form> 
      <div class="btnBox">
        <div class="left">
          <el-button type="primary"  @click="getList">刷新数据</el-button>
        </div>
        <div class="right">
          <!-- <el-button type="primary"  @click="addVirtual">添加虚拟用户</el-button> -->
          <div style="margin-left: 14px">
            <export-excel-button
              title="用户列表"
              action="/box/activity/customer/export"
              :params="ExportParams"
            />
          </div>
        </div>
      </div>
      <el-table :data="customerList" border style="width: 100%;margin-top:14px" @sort-change='sortChange'>
        <el-table-column label="序号" type="index" width="55" align="center" fixed />
        <el-table-column prop="customerType" align="center" label="用户类型" :formatter="handleCustomerType"/> 
        <el-table-column prop="customerPhone" align="center" label="手机号" />
        <el-table-column prop="customerName" align="center" label="姓名" />
        <el-table-column prop="buyAmount" align="center"  label="购买数量" />
        <el-table-column prop="boxAmount" align="center" sortable="custom" label="开启数量" />
        <el-table-column prop="payMoney" align="center" sortable="custom" label="支付金额" />
        <el-table-column prop="couponAmount" align="center" label="盲盒券使用数量" />
        <el-table-column prop="cocoAmount" align="center" label="CoCo使用数量" />
        <el-table-column prop="tfAmount" align="center" label="椰分使用数量" />
        <el-table-column prop="discountMoney" align="center" label="优惠金额" />
      </el-table>
       
       <pagination
        v-show="total>0"
         :total="total"
         :page-sizes="[10, 20, 30, 50,300,500,1000]"
         :page.sync="queryParams.pageNum" 
         :limit.sync="queryParams.pageSize" 
        @pagination="getList" />
    </div>
    <!-- <virtualDialog :id="id" v-bind="$attrs" v-if="dialogVisible" :visible.sync="dialogVisible"
      @success="_handleSuccess" /> -->
  </div>
</template>
<script>
import {
  customerList,
} from '@/api/blindBox/activityDetail'
import ExportExcelButton from "@/components/ExportExcelButton/index";
// import virtualDialog from './virtualDialog'
export default {
  name: "shopDetail",
  components: {

    ExportExcelButton
  },
  props: {
    id: String,
  },
  data() {
    return {
      loading: false,
      dialogVisible: false,
      typeList: [
        {id: 0,value: '活动数据'},
        {id: 1,value: '参与用户'},
        {id: 2,value: '盲盒订单'},
        {id: 3,value: '开奖名单'},
      ],
      total: 0,
      customerList:[],
      queryParams: {
        id: '',
        pageNum: 1,
        pageSize: 10,
        sort: '',
        column: '',
        keyword: '',
      },
    };
  },
  watch: {
   
  },
  computed: {
    ExportParams() {
      const params = {
        ...this.queryParams,
      };
      return params;
    },
  },
  created() {
    this.queryParams.id = this.id
    this.getList()
  },
  mounted() {
  
  },
  methods: {
    /** 查询盲盒活动列表 */
    getList() {
      this.loading = true;
      customerList(this.queryParams).then(response => { 
        const {records ,total} = response.result
        console.log('response',response)
        records.forEach(item => {
          item.isEdite = false
          return item
        })
        this.customerList = records
        console.log('this.customerList',this.customerList)
        this.total = total
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      // this.resetForm();
      this.$refs["queryForm"].resetFields();
      this.date = []
      console.log('this.queryParams', this.queryParams)
      this.handleQuery();
    },
    //排序
    sortChange(column, prop, order) {
        //点击排序按钮后拿到column.order，可以发送column.order给后台，后台再根据什么排序来返回排序过后的数据
        console.log(column + '---' + column.prop + '---' + column.order)
        //输出的结果 [object Object]---name---ascending
        // if(column.prop == 'total'){
        //   this.queryParams.column = 1
        //   if(column.order == 'ascending'){
        //     this.queryParams.sort = 'asc'
        //   }else{
        //     this.queryParams.sort = 'desc'
        //   }
        // }
        if(column.prop == 'boxAmount'){
            this.queryParams.column = 2
           if(column.order == 'ascending'){
            this.queryParams.sort = 'asc'
          }else{
            this.queryParams.sort = 'desc'
          }
        }else if(column.prop == 'payMoney'){
          this.queryParams.column = 3
           if(column.order == 'ascending'){
            this.queryParams.sort = 'asc'
          }else{
            this.queryParams.sort = 'desc'
          }
        }
        this.getList()
    },
    handleCustomerType(row){
      if(row.customerType == 1){
        return '虚拟用户'
      }else if(row.customerType == 2){
        return '实际用户'
      }
    },
    _handleSuccess(){
      this.getList()
    },
  },
};
</script>
<style lang="scss" scoped>
.btnBox{
  display: flex;
  justify-content: space-between;
  align-items: center;
  .right{
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
}
</style>
